<template>
  <div>

      <div class="demo-input-suffix" style="display: flex;align-content: center">
        类型
        <el-input placeholder="类型" prefix-icon="el-icon-search" v-model="typeName" style="width:15%;margin: 0px 10px 0px 10px;">
        </el-input>
        用户
        <el-input placeholder="用户" prefix-icon="el-icon-search" v-model="userName" style="width:15%;margin: 0px 10px 0px 10px;">
        </el-input>
        <el-button @click="handleCurrentChange" type="primary" icon="el-icon-search">搜索</el-button>
      </div>

      <template>
        <el-table :data="videoList" style="width: 100%" v-loading="loading">
          <el-table-column prop="videoTitle" label="视频标题"  align="center"></el-table-column>
          <el-table-column label="视频首图"  align="center">
            <template slot-scope="scope">
              <el-popover placement="top-start" title="" trigger="hover">
                <img :src="url + scope.row.imgSrc" alt="" style="width: 150px;height: 150px">
                <img slot="reference" :src="url + scope.row.imgSrc" style="width: 100%;height: 100%">
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="typeName" label="视频类型"  align="center"></el-table-column>
          <el-table-column label="视频展示"  align="center">
            <template slot-scope="scope">
              <video slot="reference" :src="url + scope.row.videoSrc" style="width: 100%;height: 100%"></video>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" width="100%" align="center"></el-table-column>
          <el-table-column prop="username" label="用户姓名"  align="center"></el-table-column>
<!--          <el-table-column prop="headImg" label="用户头像" width="100%" align="center">-->
<!--            <template slot-scope="scope" align="center">-->
<!--              <el-popover placement="top-start" title="" trigger="hover">-->
<!--                <img :src="url + scope.row.headImg" alt="" style="width: 150px;height: 150px">-->
<!--                <img slot="reference" :src="url + scope.row.headImg" style="width: 100%;height: 100%">-->
<!--              </el-popover>-->
<!--            </template>-->
<!--          </el-table-column>-->

          <el-table-column prop="videoView" label="浏览次数"  align="center"></el-table-column>
          <el-table-column label="操作" width="200px" align="center">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="primary"
                         @click="editVideo(scope.row.id)"
                         icon="el-icon-edit">编辑
              </el-button>
              <el-button size="mini"
                         type="danger"
                         slot="reference"
                         icon="el-icon-delete"
                         @click="deletePrompt(scope.row.videoTitle,scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="pageNo"
                     :page-size="pageSize"
                     layout="prev, pager, next, jumper"
                     :total="pagesTotalCount" style="margin-top: 10px">
      </el-pagination>

    <el-dialog title="视频详情" :visible.sync="videoDetailsDialog">
      <el-form ref="form" :model="videoDetails" label-width="80px">
        <el-form-item label="视频标题 :">
          <el-input v-model="videoDetails.videoTitle"></el-input>
        </el-form-item>
        <el-form-item label="视频首图 :">
           <img :src="url + videoDetails.imgSrc" style="width:80px;height:80px;">
        </el-form-item>
        <el-form-item label="视频类型 :">
          <el-input v-model="videoDetails.typeName"></el-input>
        </el-form-item>
        <el-form-item label="视频展示 :">
          <video :src="url + videoDetails.videoSrc" style="width:80px;height:80px;"></video>
        </el-form-item>
        <el-form-item label="创建日期 :">
          <el-input v-model="videoDetails.createTime" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户名称 :">
          <el-input v-model="videoDetails.username" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="浏览次数 :">
          <el-input v-model="videoDetails.videoView" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="表述内容 :">
          <el-input type="textarea" v-model="videoDetails.explain"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="quedingxiugai">确定</el-button>
          <el-button @click="quxiao">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>

</template>

<script>

import request from "../utils/request";

export default {
  name: 'Video',
  components: {

  },
  data(){
    return{
      videoList:[],
      //分页参数
      pageNo:1,//当前页码
      pageSize:10,//每页个数
      pageTotal:0,//页码数
      pagesTotalCount:0,//总条数
      //搜索内容
      typeName:'',
      userName:'',
      url:'',
      loading: true,
      videoDetails: {},
      videoDetailsDialog:false,
    }
  },
  mounted:function(){
    this.url=process.env.VUE_APP_BASE_API;
    this.handleCurrentChange();
  },
  methods:{
    handleCurrentChange:function() {//分页改变时会触发
      var that = this;
      that.loading = true;
      request.get("/videoWeb/searchVideo", {
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          typeName: this.typeName,
          userName: this.userName,
        },
      }).then(res =>{
          that.videoList = res.items;
          that.pageTotal = res.pageTotal;
          that.pagesTotalCount = res.pagesTotalCount;
          setTimeout(function (){
            that.loading = false;
          }, 300);
      })
    },
    deleteVideo(id){//通过id删除视频信息
      var that = this;
      request.get("/videoWeb/deleteVideo",{
        params: {
          id: id,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          typeName: this.typeName,
          userName: this.userName,
        }
      }).then(res =>{
        that.videoList = res.items;
        that.pageTotal = res.pageTotal;
        that.pagesTotalCount = res.pagesTotalCount;
      })
    },
    deletePrompt(videoTitle,id) {//删除提示框
      this.$confirm('确定要删除视频【'+ videoTitle +'】吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteVideo(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getUserList();
      });
    },
    editVideo(id) {//打开编辑框
      var that = this;
      request.get("/videoWeb/getVideoDetails",{
        params: {
          id: id,
        }
      }).then(res =>{
        that.videoDetails = res;
      });
      this.videoDetailsDialog = true;
    },
    quedingxiugai(){//修改视频

    },
    quxiao(){//取消修改
      this.videoDetailsDialog = false;
      this.$message({
        message: '取消修改!'
      });
    },
  }
}
</script>
